<template>
  <div
    class="mt-18px w-400px min-h-400px h-[fit-content] flex flex-col bg-white rounded-16px overflow-hidden pb-18px box-border relative z-0"
  >
    <div
      class="absolute top-0 inset-x-0 w-full h-64px bg-gradient-to-b from-#EFE7FF to-#FFFFFF z-[-1]"
    ></div>
    <div class="mt-24px mx-18px h-24px flex flex-row justify-between items-center">
      <h2 class="h-24px text-24px leading-24px font-bold text-#242633">排行榜</h2>
    </div>
    <template v-if="rankList.length > 0">
      <!-- <div class="mt-16px mb-8px mx-18px flex flex-row">
        <button class="mr-24px flex flex-col items-center">
          <div class="text-14px text-#8A8C99 text-#242633! font-bold">All</div>
          <div class="mt-2px w-12px h-4px bg-#7733FF rounded-2px"></div></button
        ><button class="mr-24px flex flex-col items-center">
          <div class="text-14px text-#8A8C99">Gift</div>
          ></button
        ><button class="mr-24px flex flex-col items-center">
          <div class="text-14px text-#8A8C99">Order</div>
        </button>
      </div> -->
      <div
        class="mt-8px mx-18px h-52px flex flex-row items-center"
        v-for="(item, index) in rankList"
        :key="index"
      >
        <div class="w-52px h-52px flex flex-col items-center relative z-0">
          <img
            :src="item.header_img"
            alt=""
            class="w-48px h-48px rounded-50% border border-2px border-#FFF475"
          /><img
            src="@/assets/no1.png"
            alt=""
            class="absolute bottom-0 inset-x-0 w-52px h-auto object-cover z-1"
            v-if="index === 0"
          />
          <img
            src="@/assets/no2.png"
            alt=""
            class="absolute bottom-0 inset-x-0 w-52px h-auto object-cover z-1"
            v-if="index === 1"
          />
          <img
            src="@/assets/no3.png"
            alt=""
            class="absolute bottom-0 inset-x-0 w-52px h-auto object-cover z-1"
            v-if="index === 2"
          />
        </div>
        <div class="ml-7px w-220px text-14px text-#242633 truncate">{{ item.nick_name }}</div>
        <div class="flex-1"></div>
        <div class="text-14px w-80px text-#8A8C99 text-right truncate">{{ item.total_price }}</div>
        <img src="@/assets/money.png" alt="" class="ml-4px w-18px h-18px" />
      </div>
    </template>
    <div class="h-500px flex justify-center items-center" v-else>
      <Empty />
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { getGoldCoinRank } from '@/api/wallet'
import { useRoute } from 'vue-router'
import Empty from '@/components/empty/index.vue'
const route = useRoute()
const userId = route.params.id

const rankList = ref([])
console.log(userId)
getGoldCoinRank(userId).then((res) => {
  rankList.value = res
})
</script>

<style></style>
